<!--采购合同-->
<?php echo $this->render('/public/header');?>
<?php use yii\helpers\Url;?>
<script src="https://cdn.bootcss.com/element-ui/1.4.2/index.js"></script>
<link href="https://cdn.bootcss.com/element-ui/1.4.2/theme-default/index.css" rel="stylesheet">
<style>
    input[type=file] {display: none}
</style>
<div class="col-xs-12" id="main">
    <table class="table table-borderd" id="table">
        <thead>
            <tr>
                <th>invoice</th>
                <th>客户名称</th>
                <th>客户地址</th>
                <th>客户邮箱</th>
                <th>客户tel</th>
                <th style="width:300px">操作</th>
            </tr>
        </thead>
        <?php if($this->params['list']){?>
        <?php foreach ($this->params['list'] as $k => $v) { ?>
        <tr>
            <td><?php $customer = json_decode($v['customer_info'],true);echo $v['invoice_id'];?></td>
            <td><?php echo $customer['buyer'];?></td>
            <td><?php echo $customer['address'];?></td>
            <td><?php echo $customer['email'];?></td>
            <td><?php echo $customer['tel'];?></td>
            <td>
               <!--<button class="layui-btn layui-btn-normal" onclick="hide('<?php echo $v['invoice_id'];?>')"></button>-->
                <button class="layui-btn layui-btn-danger" onclick="edit('<?php echo $v['invoice_id'];?>')">关联采购合同</button>
                <a href="/sell/download_purchase?id=<?php echo $v['invoice_id'];?>" class="layui-btn layui-btn-normal">导出excel</a>
            </td>
        </tr>
        <?php } ?>
        <?php } ?>
    </table>
    <div id="purchase" style="display: none">
        <div class="col-xs-4">
            <div class="form-group">
                <label for="exampleInputEmail1">供方名称</label>
                <input type="text" class="form-control" v-model="supplier_name" >
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">供方地址</label>
                <input type="text" class="form-control" v-model="supplier_address">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">联系电话</label>
                <input type="text" class="form-control" v-model="supplier_tel">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">签订地址</label>
                <input type="text" class="form-control" v-model="qianding_address">
            </div>
        </div>
        <div class="col-xs-4 col-xs-offset-2">
            <div class="form-group">
                <label for="exampleInputEmail1">绑定invoice</label>
                <input type="text" class="form-control" v-model="invoice" disabled>
            </div>

            <div class="form-group">
                <label for="exampleInputEmail1">合同编号</label>
                <input type="text" class="form-control" v-model="purchase_num" disabled>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">签订日期</label>
                <input type="date" class="form-control" value="<?php echo date('Y-m-d');?>" v-model="qianding_date">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">采购负责人</label>
                <input type="text" class="form-control" v-model="zh_name">
            </div>
        </div>
        <div class="col-xs-12">
            <table class="table table-borderd">
                <thead>
                    <tr>
                        <th>产品品名</th>
                        <th style="width: 100px;">图片</th>
                        <th style="width: 120px;">图片预览</th>
                        <th>品名及规格</th> 
                        <th>数量</th> 
                        <th>单价</th>
                        <th>总价</th> 
                        <th>操作</th>
                    </tr>
                </thead>
                <tr v-for="(v,k) in product_list">
                    <td><input style="width:100%" type="text" v-model="v.item" /></td>
                    <td>
                        <div class="source"> 
                            <el-upload
                            :name="'img_'+k"
                            class="upload-demo"
                            action="/sell/upload_img"
                            :on-success="handleSuccess"
                            >
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </div>
                </td>
                <td><div v-for="(img,k2) in v.img_src"><i class="middleImg icon tu_04" @click="del_img(k,k2)" style="float:right"></i><img  :src="img" style="max-width:100px" /></div></td>
                <td><input style="width:100%" type="text" v-model="v.item_detail" /></td>
                <td><input style="width:100%" type="text" v-model="v.num" /></td>
                <td><input style="width:100%" type="text" v-model="v.price" /></td>
                <td>{{(v.num)*(v.price)}}</td>
                <td>
                    <i class="middleImg icon tu_09" @click="del(k)"></i>
                    <i class="middleImg icon tu_10" @click="add(k)"></i>
                </td>
            </tr>
        </table>
        <br/>
        <br/>
        <div class="col-xs-12">
            <div class="form-inline">
                <div class="form-group">
                    <label for="exampleInputPassword1">定金</label>
                    <input type="text" class="form-control" v-model="deposit">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">交货日期</label>
                    <input v-model="delivery_date" type="date" class="form-control">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">户名</label>
                    <input type="text" class="form-control" v-model="account_name">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">卡号</label>
                    <input type="text" class="form-control" v-model="account_num">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">开户行</label>
                    <input type="text" class="form-control" v-model="account_address">
                </div>
            </div>
        </div>
        <br />
        <br />
        <div class="col-xs-12" style="margin-top:10px">
            <button type="submit" class="btn btn-default" @click="upload()">提交</button>
        </div>
    </div>
</div>

</div>
<script type="text/javascript">
var vm = new Vue({
el:"#purchase",
    data:{
    invoice:"",
        supplier_name:"",
        supplier_address:"",
        supplier_tel:"",
        qianding_date:"",
        qianding_address:"",
        purchase_num:"<?php echo $this->params['purchase'];?>",
        product_list:[
            {"item":"","img_src":[],item_detail:"",num:1,price:0,total:0},
            {"item":"","img_src":[],item_detail:"",num:1,price:0,total:0},
            {"item":"","img_src":[],item_detail:"",num:1,price:0,total:0}
        ],
        deposit:"",
        delivery_date:"",
        account_name:"",
        account_num:"",
        account_address:"",
        zh_name:"<?php echo $this->params['zh_name'];?>"
        },
        methods:{
        handleSuccess:function(res, file, fileList)
        {
            if(res.code==1)
            {
                var k = res.name.split("_")[1];
                vm.product_list[k].img_src.push(res.msg);

            }
        },
            del_img:function(listk,imgk)
            {
                this.product_list[listk].img_src.splice(imgk,1);
            },
            del:function(i)
            {
                if(this.product_list.length==1)
                {
                    layer.alert("不能再删除了哦");return false;
                }
                this.product_list.splice(i,1);
            },
            add:function()
            {
                this.product_list.push({"item":"","img_src":[],item_detail:"",num:"",price:"",total:""});
            },
            upload:function()
            {
                if(!thia.qianding_date)
                {
                    layer.alert("签订日期未填");return false;
                }
                if(!this.delivery_date)
                {
                    layer.alert("交货日期未填");return false;
                }
                if(!this.account_num)
                {
                    layer.alert("卡号未填");return false;
                }
                if(!this.account_name)
                {
                    layer.alert("账号名未填");return false;
                }
                for(k in this.product_list)
                {
                    this.product_list[k]['total'] = this.product_list[k]['price']*this.product_list[k]['num'];
                }
                layer.confirm('确认提交',{},function(){
                    var str = JSON.stringify(vm.$data);
                    var data={data:str};
                    var url = "<?php echo Url::to(['sell/upload_purchase']);?>";
                    $.post(url,data,function(res){
                        if(res.code==1)
                        {
                            layer.confirm(res.msg,{},function(){
                                window.location.reload();
                            })
                        }
                        else
                        {
                            layer.alert(res.msg);
                        }
                    },'json')
                })
            }
        }
    });

function hide(v)
{
    var url = "<?php echo Url::to(['sell/edit_purchase']);?>?id="+v;
    $.get(url,function(res){
        if(res.code==1){
            layer.alert("该记录已生成,请选择编辑");
        }
        else
        {
            $("#table").hide();
            $("#purchase").show();
        }
    },'json')
        vm.invoice=v;
}

function edit(v)
{
    var url = "<?php echo Url::to(['sell/edit_purchase']);?>?id="+v;
    $.get(url,function(res){
        if(res.code==1)
        {
            $("#table").hide();
            $("#purchase").show();
            vm.account_address  = res.data.account_address;
            vm.account_name     = res.data.account_name;
            vm.account_num      = res.data.account_num;
            vm.product_list     = res.data.product_list;
            vm.deposit          = res.data.deposit;
            vm.invoice          = res.data.invoice;
            vm.purchase_num     = res.data.purchase_num;
            vm.supplier_name    = res.data.supplier_name;
            vm.supplier_address = res.data.supplier_address;
            vm.supplier_tel     = res.data.supplier_tel;
            vm.qianding_date    = res.data.qianding_date;
            vm.qianding_address = res.data.qianding_address;
            vm.delivery_date    = res.data.delivery_date;
            vm.zh_name          = res.data.zh_name
        }
        else
        {
            hide(v);
        }


    },'json')
}

</script>
<?php echo $this->render('/public/footer');?>
